// ========================================================
// 常用工具样式
// ========================================================


// 文字超过指定行。。。显示
@mixin text-ellipsis($line: 1) {
	// $line: number
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	@if $line > 1 {
		display: -webkit-box;
		-webkit-line-clamp: $line;
  		-webkit-box-orient: vertical;
	}
}

// 文字两端对齐
@mixin text-justify() {
    text-align: justify;

    &:after {
        display: inline-block;
        overflow: hidden;
        width: 100%;
        height: 0;
        content: '';
    }
}


// 文字对齐方式
@mixin text-align($dir) {
	// $dir: left | right | center | justify
	text-align: $dir !important;
}



/*====================================================
 * retina-border 视网膜屏下 border 生成代码
 *====================================================*/
$retina-pixel-ratio: 2 !default; // 缩放系数

// 设置 retain 屏幕下的 边框颜色
@mixin retina-border-color($color, $type: all) {
    @each $pos in $type {
        @if $pos == all {
            &:before {
                border-color: $color;
            }
        }@else {
            &:before {
                border-#{$pos}-color: $color;
            }
        }
    }
}

// 设置 retina 屏幕下的 边框大小
@mixin retina-border-width($type, $size: 1px) {
    @each $pos in $type {
        @if $pos == all {
            &:before {
                border-width: $size;
            }
        }@else {
            &:before {
                border-#{$pos}-width: $size;
            }
        }
    }
}

// 设置 retina 屏幕下 边框圆角
@mixin retina-border-radius($size: 1px, $type: all) {
    @each $pos in $type {
        @if $pos == all {
            border-radius: $size;

            &:before {
                border-radius: $size;

                @media (-webkit-min-device-pixel-ratio: $retina-pixel-ratio),
                (min-device-pixel-ratio: $retina-pixel-ratio) {
                    border-radius: $size*2;
                }
            }
        }@else {
            border-radius: $size;

            &:before {
                border-#{$pos}-radius: $size;

                @media (-webkit-min-device-pixel-ratio: $retina-pixel-ratio),
                (min-device-pixel-ratio: $retina-pixel-ratio) {
                    border-#{$pos}-radius: $size*2;
                }
            }
        }
    }
}

// retina 屏幕下 视网膜屏幕边框 核心代码
@mixin retina-border-content($color, $radio: $retina-pixel-ratio) {
    z-index: 1;
    content: " ";
    position: absolute;
    border-style: solid;
    border-color: $color;
    border-width: 0;
    width: 100%;
    height: 100%;
    left: 0; top: 0;
    pointer-events: none;

    @media (-webkit-min-device-pixel-ratio: $radio),
            (min-device-pixel-ratio: $radio) {

        left: -50%; top: -50%;
        width: 200%; height: 200%;
        transform: scale(.5, .5);
    }
}

// 修复 retina 屏幕下 border 变宽的问题
@mixin retina-border($type, $color) {
	// $type: top | bottom
	// $color: color

    &:before {
        @include retina-border-content($color, $retina-pixel-ratio);

        @each $pos in $type {
            @if $pos == all {
                border-width: 1px;
            }@else {
                border-#{$pos}-width: 1px;
            }
        }
    }
}